import React from "react";
import TheImage from "@/components/TheImage";
import "../style/style.less";
import { apiServiceDetail } from '@/request/services'
import _ from 'lodash'

class Detail extends React.Component {
  state = {
    dataSource: [],
    serviceTxt: ''
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { serviceId } = this.props
    let res = await apiServiceDetail({ serviceId })
    if (res.code === 0 && res.data) {
      const data = res.data
      let petType = data.petType
      if (petType !== null){
        switch (petType){
          case 0:
            petType = "狗"
            break;
          case 1:
            petType = "猫"
            break;
          case 2:
            petType = "不限制"
            break;
          case 3:
            petType = "异宠"
            break;
          default:
            break
        }
      }
      else {
        petType = "/"
      }
      let dataSource = [
        {
          title: "服务类型",
          value: data.serviceClassifyName
        },
        {
          title: "服务名称",
          value: data.serviceName
        },
        {
          title: "服务logo",
          value: (
            <TheImage
              width={80}
              height={80}
              src={data.serviceShowFile}
            />
          )
        },
        {
          title: "服务图片",
          value: _.toString(data.serviceBannerFile).split(',').map(v => {
            return <TheImage
              width={80}
              height={80}
              src={v}
            />
          })
        },
        {
          title: "宠物种类",
          value: petType
        },
        {
          title: "宠物重量(kg)",
          value: (data.petWeightStart !== null ? data.petWeightStart : '/')+'~'+(data.petWeightEnd !== null ? data.petWeightEnd :'/')
        },
        {
          title: "服务价格",
          value: <React.$Price price={data.serviceRealPrice} />

        },

        {
          title: "预约时间",
          value: data.serviceStartTime + ' 至 ' + data.serviceEndTime
        },
        {
          title: "服务标签",
          value: data.labelList.map(v => v.serviceShowLabelName).join(',')
        },
      ]
      // 会员卡类型添加赠送余额字段
      if (data.serviceClassifyName.indexOf('会员卡') > -1) {
        dataSource.splice(5, 0, {
          title: "赠送余额",
          value: <React.$Price price={data.giftBalance} />

        })
      }
      let serviceTxt = data.serviceTxt
      this.setState({
        dataSource,
        serviceTxt
      })
    }
  }
  render() {
    return (
      <div className="service-detail-box">
        {this.state.dataSource.map((v, i) => {
          return (
            <div className="service-detail-item" key={i}>
              <p className="service-detail-title">{v.title}</p>
              <p className="service-detail-value">{v.value}</p>
            </div>
          );
        })}
        <p className="title">服务说明</p>
        <div dangerouslySetInnerHTML={{ __html: this.state.serviceTxt }} />
      </div>
    );
  }
}

export default Detail;
